/*
 * @Author: hongbin
 * @Date: 2022-11-24 15:36:32
 * @LastEditors: hongbin
 * @LastEditTime: 2022-11-25 23:59:58
 * @Description:
 */
import { FC } from "react";
import styled from "styled-components";
import { flexCenter } from "../../styled";

interface IProps {
    parts: string[];
    currentPartType: string;
    onChange: (partName: string) => void;
    saveConfig: VoidFunction;
    toggleConfig: (n: "config1" | "config2" | "config3") => void;
    currentConfig: string;
}

const typeName: Record<string, string> = {
    head: "头饰",
    jacket: "上装",
    pants: "下装",
};

const Option: FC<IProps> = ({ parts, currentPartType, onChange, saveConfig, toggleConfig, currentConfig }) => {
    return (
        <Container>
            {parts.map((partType) => (
                <span
                    style={
                        currentPartType == partType
                            ? {
                                  background: "#56c20e",
                              }
                            : undefined
                    }
                    onClick={() => onChange(partType)}
                    key={partType}
                >
                    {typeName[partType]}
                </span>
            ))}
            <ConfigArea>
                <h5>配置列表</h5>
                {["配置1", "配置2", "配置3"].map((configName, index) => {
                    const config = `config${index + 1}`;
                    return (
                        <span
                            style={
                                config == currentConfig
                                    ? {
                                          background: "#56c20e",
                                      }
                                    : undefined
                            }
                            onClick={() => toggleConfig(config as "config1" | "config2" | "config3")}
                            key={configName}
                        >
                            {configName}
                        </span>
                    );
                })}
                <SaveConfig onClick={saveConfig}>应用配置</SaveConfig>
            </ConfigArea>
        </Container>
    );
};

export default Option;

const SaveConfig = styled.span`
    font-size: max(2vw, 1.4rem);
`;

const ConfigArea = styled.div`
    position: absolute;
    bottom: 0vh;
    width: 100%;
    text-align: center;
`;

const Container = styled.div`
    background: #215300;
    width: 20%;
    display: flex;
    flex-direction: column;
    position: relative;
    color: #fffae5;
    span {
        ${flexCenter};
        text-align: center;
        padding: 1vmax 0.3vmax;
        :hover {
            background: #173900;
        }
    }
    & > span {
    }
`;
